<template>
  <el-dialog title="新增员工" :visible="showDialog" :before-close="closeFn">
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="formData.username"
          style="width:50%"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input
          v-model="formData.mobile"
          style="width:50%"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="formData.timeOfEntry"
          style="width:50%"
          placeholder="请选择入职时间"
        />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select
          v-model="formData.formOfEmployment"
          style="width:50%"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in hireType"
            :key="index"
            :value="item"
            :label="Num2EnumFn(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input
          v-model="formData.workNumber"
          style="width:50%"
          placeholder="请输入工号"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          v-model="formData.departmentName"
          style="width:50%"
          placeholder="请选择部门"
          @focus="showTree = true"
        />
        <!-- 操控 -->
        <el-button
          v-if="showTree"
          style="margin-left:10px"
          size="small"
          type="primary"
          @click="showTree = false"
          >收起</el-button
        >
        <!-- 树形 -->
        <el-tree
          v-if="showTree"
          :data="department"
          default-expand-all
          :props="{label: 'name'}"
          @node-click="selectNodeFn"
        />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="formData.correctionTime"
          style="width:50%"
          placeholder="请选择转正时间"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="closeFn">取消</el-button>
          <el-button type="primary" size="small" @click="submitFn"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { IEmployeeInfo } from '@/model/interface/employee'
import { IDeparts } from '@/model/interface/departments'
import { hireTypeEnum } from '@/model/enum/employee'
import { Form as ElForm } from 'element-ui'
import { addEmployeeAPI } from '@/api/employees'
import { getDepartmentAPI } from '@/api/departments'
import { formatTree } from '@/utils/tree'

@Component({ name: 'AddEmployee' })
export default class extends Vue {
  @Prop({ required: true }) showDialog!: boolean

  formData: IEmployeeInfo = {
    username: '',
    mobile: '',
    formOfEmployment: undefined,
    workNumber: '',
    departmentName: '',
    timeOfEntry: '',
    correctionTime: ''
  } // 表单数据

  rules = {
    username: [
      { required: true, message: '用户姓名不能为空', trigger: 'blur' },
      {
        min: 1,
        max: 4,
        message: '用户姓名为1-4位'
      }
    ],
    mobile: [
      { required: true, message: '手机号不能为空', trigger: 'blur' },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式不正确',
        trigger: 'blur'
      }
    ],
    formOfEmployment: [
      { required: true, message: '聘用形式不能为空', trigger: 'blur' }
    ],
    workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
    departmentName: [
      { required: true, message: '部门不能为空', trigger: 'change' }
    ],
    timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }]
  } // 校验规则（没有类型接口）

  hireType: Array<hireTypeEnum> = [1, 2]
  department: Array<IDeparts> = [] // 部门
  showTree = false // 树形数据

  created() {
    this.getDepartmentFn()
    console.log(hireTypeEnum[1])
    console.log(hireTypeEnum.正式)
  }

  async getDepartmentFn() {
    this.department = formatTree((await getDepartmentAPI()).depts, '')
  }

  selectNodeFn(node: any) {
    this.showTree = false
    this.formData.departmentName = node.name
  }

  closeFn() {
    this.$message.info('取消操作')
    ;(this.$refs.form as ElForm).resetFields()
    this.$emit('update:showDialog', false)
  }

  async submitFn() {
    try {
      await (this.$refs.form as ElForm).validate()
      await addEmployeeAPI(this.formData)
      this.$message.info('操作成功')
      ;(this.$refs.form as ElForm).resetFields()
      this.$emit('update:showDialog', false)
      this.$emit('reload')
    } catch (e) {
      this.$message.info('操作失败')
      console.log(e)
    }
  }

  Num2EnumFn(item: hireTypeEnum) {
    return hireTypeEnum[item]
  }
}
</script>

<style></style>
